<template>
  <div class="box">
    <div class="top_back">
      <div class="el-icon-arrow-left"
           @click="$router.go(-1)"></div>
      <div class="top_logo">
        <img src="../../../../assets/static/register/l1.png"
             alt="">
      </div>
      <div class="card">
        <div class="card_title">{{$t('Remove Card')}}</div>
        <div class="col-wrapper">
          <div class="jianhang card_YH">
            <div>{{ cardInfo.bankName + ' ' + cardInfo.cardName }}</div>
            <!--          <div>储蓄卡</div>-->
            <!--          <div>484848484848</div>-->
          </div>
        </div>
        <div class="col-wrapper">
          <div class="card_btn" @click="openPayDialog">
            解绑
          </div>
        </div>
      </div>
    </div>
    <!--     支付密码 弹窗-->
    <Dialog
      @opened="opened"
      width="100vw"
      custom-class="payDialog"
      :visiable="payDialogVisiable"
      :show-close="false"
      @close="closeDialog">
      <div class="row-wrapper payCode-title" style="justify-content: space-between" slot="title">
        <div @click="closeDialog">
          <img src="../../../../assets/static/addReceiverAccount/back.png" alt=""/>
        </div>
        <span>{{ $t('home.Setpaymentpassword') }}</span>
        <div></div>
      </div>
      <div class="card_code ">
        <div class="inputHeight row-wrapper" v-for="index in password.length" :key="index">
          <input
            style="-webkit-text-security:disc;text-security:disc;"
            type="tel"
            @keydown.delete="e=>{verifyDel(e,index-1)}"
            ref="input"
            @focus="inputFocus"
            @input="beInput(index-1)"
            v-model="password[index-1]"/>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import '@/styles/verify.scss'
import '@/styles/flax.css'
import {deletBankCard} from '@/api/merbership/member'
import {yz_pay_password} from '@/api/merbership/user'
import {myInfo} from '@/api/merbership/my'

export default {
  activated() {
    this.cardInfo.cardName = this.$route.query.card_number
    this.cardInfo.bankName = this.$route.query.bank_name
    this.cardInfo.user_bank_id = this.$route.query.id
    this.myInfo()
  },
  data() {
    return {
      dialogVisiable: false,
      //   ------- 支付密码 --------------
      payDialogVisiable: false,
      password: ['', '', '', '', '', ''],
      passwordRepet: ['', '', '', '', '', ''],
      passwordStr: '',
      deleteStatus: false,
      // ---------------------- 银行卡信息-------------------
      cardInfo: {
        user_bank_id: undefined,
        cardName: '',
        bankName: ''
      },
      handsSetPayPassword: false
    }
  },
  methods: {
    /**
     * 输入支付密码
     */
    openPayDialog() {
      if (this.handsSetPayPassword) {
        this.payDialogVisiable = true
      } else {
        this.$alert('是否去设置', '未设置支付密码', {
          confirmButtonText: '确定',
          callback: () => {
            this.$router.push({path: '/listPayPassword'})
          }
        })
      }
    },
    /**
     * 获取焦点时
     */
    inputFocus() {
      // 解决密码框输满之后的失效问题 (没有input[6])
      if (this.passwordStr.length >= 6) {
        this.$refs.input[5].focus()
        return ''
      }
      // 控制焦点在未输入的第一个密码框内 为了不干扰delete 判断是否是delete操作
      if (!this.deleteStatus) {
        this.$refs.input[this.passwordStr.length].focus()
      }
    },
    /**
     * 删除
     * @param e
     * @param index
     */
    verifyDel(e, index) {
      // 标识当前操作为删除
      this.deleteStatus = true
      this.passwordStr = this.password.join('')
      if (index > 0) {
        this.password[index] = null
        this.$refs.input[index - 1].focus()
      }
    },
    /**
     * 输入
     * @param index
     */
    beInput(index) {
      // 标识操作为非删除
      this.deleteStatus = false
      this.password[index] = this.password[index].replace(/\s/g, '')
      // 防止输入数字以外的字符
      if (isNaN(Number(this.password[index]))) {
        this.password[index] = this.password[index].replace(/[^\d]/g, '')
        return ''
      }
      // 组合密码 大于6位后停止组合
      if (this.passwordStr.length <= 6) {
        this.passwordStr = this.password.join('')
      }
      if (this.passwordStr.length > 6) {
        this.passwordStr = this.passwordStr.slice(0, 6)
      }
      // 防止输入位数过多 index为5时 verifyStr为6位
      if (index > 5) {
        return ''
      }
      if (this.passwordStr.length >= 6) {
        this.$refs.input[5].focus()
        for (let i = 0; i < 6; i++) {
          if (isNaN(Number(this.passwordStr[i]))) {
            continue
          }
          this.password[i] = this.passwordStr[i]
        }
        return ''
      }
      if (index < this.password.length) {
        if (this.password[index].length >= 1) {
          this.$refs.input[this.passwordStr.length].focus()
          for (let i = 0; i < this.passwordStr.length; i++) {
            if (isNaN(Number(this.passwordStr[i]))) {
              continue
            }
            this.password[i] = this.passwordStr[i]
          }
        }
      }
    },
    /**
     * 支付弹窗打开后
     */
    opened() {
      this.$refs.input[0].focus()
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      this.payDialogVisiable = false
      this.password = ['', '', '', '', '', '']
      this.passwordStr = ''
    },
    //   --------------- axios ------------------
    /**
     * 判断是否设置了支付密码
     */
    myInfo() {
      const pd = {}
      myInfo(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            console.log(res.data.data.pay_password)
            this.handsSetPayPassword = !(res.data.data.pay_password === '')
          }
        })
    },
    /**
     * 会员解绑银行卡
     */
    deletBankCard() {
      const pd = {
        user_bank_id: this.cardInfo.user_bank_id
      }
      deletBankCard(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.$router.go(-1)
          } else {
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 验证支付密码
     */
    yz_pay_password() {
      const pd = {
        pay_password: this.passwordStr
      }
      yz_pay_password(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.payDialogVisiable = false
            this.deletBankCard()
          } else {
            this.$message.error(res.data.msg)
          }
        })
    }
  },
  watch: {
    passwordStr(val) {
      if (val.length === 6 && !this.deleteStatus) {
        this.yz_pay_password()
      }
    }
  }
}
</script>
<style>
.payDialog {
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  border-radius: 15px 15px 0 0;
}
</style>
<style scoped>

.inputHeight {
  height: 45px;
}

/* jianhang */
.card_YH {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /*height: 80px;*/
  width: 80%;
  color: #FFF;
  padding: 20px;
}

.card_YH > div {
  margin: 15px 15px 30px 15px;
}

.card_YH > div:nth-child(1) {
  font-size: 18px;
}

.card_YH > div:nth-child(2) {
  font-size: 14px;
}

.card_YH > div:nth-child(3) {
  font-size: 15px;
}

.jianhang {
  /*background-image: url(../../../../assets/static/cardList/q1.png);*/
  background-image: url(../../../../assets/static/cardList/1.svg);
}

</style>
<style lang="scss" scoped>
.box {
  height: 100vh;
  background-color: #fff;
}

.top_back {
  background-image: url(../../../../assets/static/register/b2.png);
  background-repeat: no-repeat;
  background-size: 100%;

  .el-icon-arrow-left {
    color: #FFFFFF;
    padding: 30px 15px;
  }

  .top_logo {
    text-align: center;

    img {
      width: 263px;
    }
  }

  .card {
    margin: 15px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 15px #CCCCCC;
    border-radius: 10px;

    .card_title {
      font-size: 25px;
      font-weight: bold;
      text-align: center;
      margin: 30px 0 30px 0;
    }

    .card_mobile {
      color: #999999;
      font-size: 14px;
    }

    .card_code {
      display: flex;

      > div {
        width: 75px;
        padding: 15px 0 20px 0;
        background-image: url(../../../../assets/static/register/b1.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        border: 0 solid transparent;
      }

      input {
        text-align: center;
        width: 20px;
        height: 20px;
        font-size: 15px;
        font-weight: bold;
        border: none;
        outline: none;
      }
    }

    .card_question {
      text-align: center;
      color: #61BF02;
      font-size: 11px;
      margin: 30px 0 10px 0;
    }

    .card_btn {
      background-image: url(../../../../assets/static/register/b3.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 294px;
      text-align: center;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: bold;
      padding: 25px 0 35px 0;
    }
  }
}

.payDialog {
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  border-radius: 15px 15px 0 0;
}

.payCode-title > span {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.payCode-title {
  justify-content: space-between;
}

.payCode-title > div > img {
  width: 8.5px;
  height: 14.5px;
}

.card_code {
  display: flex;

  > div {
    width: 57.5px;
    //height: 45px;
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid #CBCBCB;
    //border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    justify-content: center;
  }

  > div:nth-child(1) {
    border-radius: 8px 0 0 8px;
  }

  > div:nth-child(6) {
    border-radius: 0 8px 8px 0;
  }


  input {
    text-align: center;
    width: 20px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    outline: none;
  }
}

</style>
